<template>
  <div class="container dark-theme">
    <div class="header">
      <div class="back-button" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </div>
      <div class="title">商品详情</div>
    </div>

    <div class="content" v-if="product">
      <div class="product-image">
        <img :src="product.image" :alt="product.name">
      </div>
      
      <div class="product-info">
        <h1>{{ product.name }}</h1>
        <div class="price">¥{{ product.price }}</div>
        
        <div class="description">
          <h3>商品描述</h3>
          <p>{{ product.description }}</p>
        </div>

        <div class="specifications">
          <h3>规格参数</h3>
          <ul>
            <li v-for="(spec, index) in product.specifications" :key="index">
              <span class="spec-name">{{ spec.name }}：</span>
              <span class="spec-value">{{ spec.value }}</span>
            </li>
          </ul>
        </div>

        <div class="purchase-section">
          <div class="quantity">
            <span>数量：</span>
            <el-input-number 
              v-model="quantity" 
              :min="1" 
              :max="99"
              size="small"
            ></el-input-number>
          </div>
          
          <div class="buttons">
            <el-button type="primary" @click="addToCart">加入购物车</el-button>
            <el-button type="success" @click="buyNow">立即购买</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PurchaseDetail',
  data() {
    return {
      product: null,
      quantity: 1
    };
  },
  created() {
    // 模拟获取商品数据
    this.product = {
      id: this.$route.params.id,
      name: '智能手表',
      price: 1299,
      image: require('@/assets/product1.jpg'),
      description: '这是一款功能强大的智能手表，支持心率监测、运动追踪、消息提醒等功能。采用高清显示屏，续航持久，防水防尘。',
      specifications: [
        { name: '品牌', value: 'SmartWatch' },
        { name: '型号', value: 'SW-2023' },
        { name: '屏幕', value: '1.4英寸 AMOLED' },
        { name: '电池', value: '300mAh' },
        { name: '防水等级', value: 'IP68' },
        { name: '系统', value: 'Android 8.0及以上' }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    addToCart() {
      this.$message.success('已添加到购物车');
    },
    buyNow() {
      this.$router.push({
        path: '/credit-business/order',
        query: {
          productId: this.product.id,
          quantity: this.quantity
        }
      });
    }
  }
};
</script>

<style scoped>
.container.dark-theme {
  background: radial-gradient(ellipse at center, #001e3c 0%, #000 100%);
  min-height: 100vh;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #002d52;
}

.back-button {
  cursor: pointer;
  color: #4fc3f7;
  font-size: 16px;
}

.title {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
}

.content {
  display: flex;
  padding: 40px;
  gap: 40px;
}

.product-image {
  flex: 1;
  max-width: 500px;
}

.product-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.2);
}

.product-info {
  flex: 1;
  padding: 20px;
  background: rgba(0, 45, 82, 0.8);
  border-radius: 8px;
}

.product-info h1 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
}

.price {
  font-size: 32px;
  color: #4fc3f7;
  margin-bottom: 30px;
}

.description, .specifications {
  margin-bottom: 30px;
}

h3 {
  color: #4fc3f7;
  margin-bottom: 15px;
}

.specifications ul {
  list-style: none;
  padding: 0;
}

.specifications li {
  margin-bottom: 10px;
  display: flex;
}

.spec-name {
  color: #b0bec5;
  width: 100px;
}

.spec-value {
  color: #fff;
}

.purchase-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(79, 195, 247, 0.2);
}

.quantity {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.quantity span {
  margin-right: 10px;
  color: #b0bec5;
}

.buttons {
  display: flex;
  gap: 20px;
}

.buttons .el-button {
  flex: 1;
  height: 44px;
  font-size: 16px;
}
</style>
